<template>
  <div>
    <div class="create-page-header">
      <div class="name">
        <a-avatar
                slot="avatar"
                shape="square"
                />
        <span>流程表单设计</span>
      </div>
      <div class="tab">
        <a-tabs  v-model="activeKey">
          <a-tab-pane  key="info" tab="基本设置">
          </a-tab-pane>
          <a-tab-pane key="form" tab="表单设计">
          </a-tab-pane>
          <a-tab-pane key="process" tab="流程设置">
          </a-tab-pane>
          <a-tab-pane key="setting" tab="高级设置">
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="action">
        <a-button shape="round" @click="onClose" >
          取 消
        </a-button>
        <a-button type="primary" shape="round"  >
          发 布
        </a-button>
      </div>
    </div>
    <div class="page-content">
      <div  v-show="activeKey === 'info'" class="base-form-wrap">
        <div class="base-form">
          <base-form  />
        </div>
      </div>
      <k-form-design  v-show="activeKey === 'form'" ref="design"  @save="onSave"/>
      <bpmn-designer   v-show="activeKey === 'process'" @save="onSave"/>
      <div v-show="activeKey === 'setting'">高级设置</div>
    </div>
  </div>
</template>
<script>
import { getById, save } from '@/api/formTemplate'
import BaseForm from './BaseForm'

export default {
  name: 'TemplateDesigner',
  components: {
    BaseForm
  },
  data() {
    return {
      saved: false,
      activeKey: 'info'
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  created() {
    this.loadData()
  },
  methods: {
    beforeunloadHandler(e) {
      e = e || window.event
      if (this.saved) {
        return
      }
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = '您是否确认离开此页面-您输入的数据可能不会被保存'
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '您是否确认离开此页面-您输入的数据可能不会被保存'
    },
    onClose() {
      window.close()
    },
    loadData() {
      if (!this.$route.query.id) {
        return
      }
      getById({ id: this.$route.query.id }).then(({ data }) => {
        if (data) {
          const value = data.formData
          this.$refs['design'].handleSetData(value ? JSON.parse(value) : {})
        }
      })
    },
    onSave(data) {
      if (!this.$route.query.id) {
        return
      }
      save({ id: this.$route.query.id, formData: data }).then(res => {
        if (res.success) {
          this.$message.success('保存成功')
          this.saved = true
        }
      })
    }
  }
}
</script>
<style lang="less">

  .create-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 0 20px 0 20px;
    background: #fff;
    .name {
      display: flex;
      align-items: center;
      .img-wrap {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 10px;
        opacity: .9;
      }
    }
    .tab {
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;
      top:0;
      .ant-tabs-bar{
        margin: 0;
      }
    }
      .action {
      display: flex;
      align-items: center;
      position: absolute;
      right: 20px;

      .ant-btn {
        margin-left: 10px;
        min-width: 89px;
        border-radius: 20px;
      }
    }
  }

  .base-form-wrap {
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    background: #f2f4f5;
    .base-form{
      width: 660px;
      padding: 24px;
      border-radius: 8px;
      background: #fff;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: 12px;
      right: 0;
      bottom: 12px;
      overflow: auto;
    }
  }
</style>
